<template>
  <div class="post-card">
    <div class="post-header">
      <img :src="post.author.avatar" class="avatar" />
      <div class="user-info">
        <router-link :to="`/profile/${post.author.id}`">
          {{ post.author.username }}
        </router-link>
        <span class="post-time">{{ formatDate(post.createdAt) }}</span>
      </div>
    </div>

    <div class="post-content">
      <p>{{ post.content }}</p>
      <img v-if="post.image" :src="post.image" class="post-image" />
    </div>

    <div class="post-actions">
      <like-button :post-id="post.id" :initial-likes="post.likes" />
      <el-button icon="el-icon-chat-dot-round" @click="showComments = !showComments">
        {{ post.comments.length }} 评论
      </el-button>
      <el-button icon="el-icon-share">分享</el-button>
    </div>

    <comment-section v-if="showComments" :post-id="post.id" :comments="post.comments" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LikeButton from '@/components/ui/LikeButton.vue';
import CommentSection from '@/components/post/CommentSection.vue';
import { formatDate } from '@/utils/date';

const props = defineProps({
  post: {
    type: Object,
    required: true
  }
});

const showComments = ref(false);
</script>